<template>
  <div class="wrap_cont">
    <span class="text" @click="bindUidList()"> 点击UID查看统计</span>

    <ul class="list-start">
      <li v-for="item in uidList" :key="item">
        <span class="text" @click="bindCardList(item)"> {{ item }} </span>
      </li>
    </ul>
    <div class="mb20"></div>
    <span class="text"> 所有卡池共抽:{{ cardList.length }}次</span>
    <span class="textNo" v-if="card5List.length > 0">
      平均{{ go999 }}次出一金</span
    >
    <ul class="list-start">
      <li v-for="item in groupList" :key="item.rank_type">
        <span class="text"
          >{{ item[0].rank_type }}星共 {{ item.length }} 个</span
        >
      </li>
    </ul>
    <div class="mb20"></div>

    <p class="text">活动UP角色池5星 共抽:{{ cardList301.length }}次</p>
    <span class="textNo" v-if="card5List301.length > 0">
      平均{{ go301 }}次出一金</span
    >
    <span class="textNo" v-if="card5List301.length > 0">
      [{{
        cardList301.length - (card5List301.length > 0 ? card5List301[0].i : 0)+1
      }}]次未出金</span
    >
    <ul>
      <li v-for="(item, index) in card5List301" :key="index">
        <span class="text301"
          >{{ item.time }} {{ item.name }} {{ item.i-1 }} [{{
            item.i -1-
            (index == card5List301.length - 1 ? 0 : card5List301[index + 1].i)
          }}]
        </span>
      </li>
    </ul>
    <div class="mb20"></div>
    <p class="text">常驻角色池5星 共抽:{{ cardList200.length }}次</p>
    <span class="textNo" v-if="card5List200.length > 0">
      平均{{ go200 }}次出一金</span
    >
    <span class="textNo" v-if="card5List200.length > 0">
      [{{
        cardList200.length - (card5List200.length > 0 ? card5List200[0].i : 0)+1
      }}]次未出金</span
    >
    <ul>
      <li v-for="(item, index) in card5List200" :key="index">
        <span class="text200"
          >{{ item.time }} {{ item.name }} {{ item.i-1 }} [{{
            item.i-1 -
            (index == card5List200.length - 1 ? 0 : card5List200[index + 1].i)
          }}]</span
        >
      </li>
    </ul>

    <div class="mb20"></div>
    <p class="text">活动UP武器池5星 共抽:{{ cardList302.length }}次</p>
    <span class="textNo" v-if="card5List302.length > 0">
      平均{{ go100 }}次出一金</span
    >
    <span class="textNo" v-if="card5List302.length > 0">
      [{{
        cardList302.length - (card5List302.length > 0 ? card5List302[0].i : 0)+1
      }}]次未出金</span
    >
    <ul>
      <li v-for="(item, index) in card5List302" :key="index">
        <span class="text302"
          >{{ item.time }} {{ item.name }} {{ item.i-1 }} [{{
            item.i -1-
            (index == card5List302.length - 1 ? 0 : card5List302[index + 1].i)
          }}]</span
        >
      </li>
    </ul>
    <div class="mb20"></div>

    <p class="text">新手角色池5星 共抽:{{ cardList100.length }}次</p>
    <span class="textNo" v-if="card5List100.length > 0">
      平均{{ go100 }}次出一金</span
    >
    <span class="textNo" v-if="card5List100.length > 0">
      [{{
        cardList100.length - (card5List100.length > 0 ? card5List100[0].i : 0)+1
      }}]次未出金</span
    >
    <ul>
      <li v-for="(item, index) in card5List100" :key="index">
        <span class="text100"
          >{{ item.time }} {{ item.name }} {{ item.i-1 }} [{{
            item.i-1 -
            (index == card5List100.length - 1 ? 0 : card5List100[index + 1].i)
          }}]</span
        >
      </li>
    </ul>
    <div class="mb20"></div>
    <div class="mb20"></div>
    <div class="mb20"></div>
    <p class="text">四星角色武器</p>
    <ul class="list-ul4">
      <li v-for="item in group4List" :key="item.name">
        <span class="text"
          >{{ item.length }}个 {{ item[0].item_type }} {{ item[0].name }}
        </span>
      </li>
    </ul>

    <!-- <ul>
      <li v-for="item in cardList" :key="item.id">
        <span class="text"
          >{{ item.time }} {{ item.name }} {{ item.rank_type }}</span
        >
      </li>
    </ul> -->
  </div>
</template>

<script>
import card from "@/components/card";

export default {
  components: {
    card,
  },

  data() {
    return {
      cardList: [],
      card4List: [],
      card5List: [],
      cardList100: [],
      card5List100: [],
      cardList200: [],
      card5List200: [],
      cardList301: [],
      card5List301: [],
      cardList302: [],
      card5List302: [],

      uidList: [],
      groupList: [],
      group4List: [],
      group5List: [],
      newUid: "",

      go100: 0,
      go200: 0,
      go301: 0,
      go302: 0,
      go999: 0,
    };
  },
  methods: {
    bindUidList() {
      let uidList;

      uidList = mpvue.getStorageSync("uids") || [];

      this.uidList = uidList;
      this.groupList = [];
      this.cardList = [];
      this.cardList100 = [];
      this.cardList200 = [];
      this.cardList301 = [];
      this.cardList302 = [];

      this.newUid = mpvue.getStorageSync("newUid") || [];
      if (this.newUid) {
        this.bindCardList(this.newUid);
      }
    },
    bindCardList(ev) {
      //console.log("uid,ev:", ev);
      let cardList;

      cardList = mpvue.getStorageSync("cardList:" + ev) || [];

      //console.log("card5List301", this.card5List301);

      this.cardList = cardList;

      cardList = sortByKey(cardList, "rank_type");

      this.groupList = this.groupBy(cardList, function (item) {
        return [item.rank_type];
      });

      this.cardList100 = mpvue.getStorageSync("cardList100:" + ev) || [];

      this.card5List100 = this.cardList100.filter((temp, index) => {
        if (temp["rank_type"] == "5") {
          temp["i"] = this.cardList100.length - index + 1;
          return temp;
        }
      });

      this.cardList200 = mpvue.getStorageSync("cardList200:" + ev) || [];

      this.card5List200 = this.cardList200.filter((temp, index) => {
        if (temp["rank_type"] == "5") {
          temp["i"] = this.cardList200.length - index + 1;
          return temp;
        }
      });

      this.cardList301 = mpvue.getStorageSync("cardList301:" + ev) || [];

      this.card5List301 = this.cardList301.filter((temp, index) => {
        if (temp["rank_type"] == "5") {
          temp["i"] = this.cardList301.length - index + 1;
          //console.log("temp", temp["i"]);
          return temp;
        }
      });

      this.cardList302 = mpvue.getStorageSync("cardList302:" + ev) || [];

      this.card5List302 = this.cardList302.filter((temp, index) => {
        if (temp["rank_type"] == "5") {
          temp["i"] = this.cardList302.length - index + 1;
          return temp;
        }
      });

      this.card4List = this.cardList.filter((temp, index) => {
        if (temp["rank_type"] == "4") {
          return temp;
        }
      });
      this.group4List = this.groupBy(this.card4List, function (item) {
        return [item.name];
      });
      this.group4List.sort((a, b) => {
        var x = a.length;
        var y = b.length;
        return x < y ? -1 : x > y ? 1 : 0;
      });
      this.group4List.reverse();


      this.card5List = this.cardList.filter((temp, index) => {
        if (temp["rank_type"] == "5") {
          return temp;
        }
      });
      this.go100 = (
        (this.card5List100.length > 0 ? this.card5List100[0].i : 0) /
        this.card5List100.length
      ).toFixed(1);
      this.go200 = (
        (this.card5List200.length > 0 ? this.card5List200[0].i : 0) /
        this.card5List200.length
      ).toFixed(1);
      this.go301 = (
        (this.card5List301.length > 0 ? this.card5List301[0].i : 0) /
        this.card5List301.length
      ).toFixed(1);
      this.go302 = (
        (this.card5List302.length > 0 ? this.card5List302[0].i : 0) /
        this.card5List302.length
      ).toFixed(1);

      
      this.go999 = 
        (((this.card5List100.length > 0 ? this.card5List100[0].i : 0)+(this.card5List200.length > 0 ? this.card5List200[0].i : 0)+(this.card5List301.length > 0 ? this.card5List301[0].i : 0)+(this.card5List302.length > 0 ? this.card5List302[0].i : 0)) / this.card5List.length
      ).toFixed(1);
    },

    groupBy: function (array, f) {
      let groups = {};
      array.forEach(function (o) {
        let group = JSON.stringify(f(o));
        groups[group] = groups[group] || [];
        groups[group].push(o);
      });
      return Object.keys(groups).map(function (group) {
        return groups[group];
      });
    },
  },
  created() {
    wx.showShareMenu({
      withShareTicket: true,
      menus: ["shareAppMessage", "shareTimeline"],
    });
    //this.bindUidList();
  },
  onShareAppMessage() {
    return {
      title: "小烈哥原神抽卡分析",
    };
  },
  onShow() {
    this.bindUidList();
  },
};
function sortNumbers(a, b) {
  return a - b;
}
//数组对象排序
function sortByKey(array, key) {
  return array.sort(function (a, b) {
    var x = a[key];
    var y = b[key];
    return x < y ? -1 : x > y ? 1 : 0;
  });
}
</script>

<style>
.wrap_cont {
  padding: 20px 30px;
}
.mb20 {
  margin-bottom: 10px;
}
.list-start {
  display: flex;
}
.list-start li {
  margin-right: 20px;
  color: coral;
}
.list-ul4 {
   
  width:300px;
}
.list-ul4 li {
  width:150px; float:left;
 
  color: rgb(255, 80, 226);
}
.log-list {
  display: flex;
  flex-direction: column;
  padding: 40rpx;
  font-size: 9pt;
}

.log-item {
  margin: 10rpx;
  font-size: 9pt;
}
.text {
  font-size: 9pt;
}
.text100 {
  font-size: 9pt;
  color: rgb(235, 47, 179);
}
.text200 {
  font-size: 9pt;
  color: rgb(240, 28, 28);
}
.text301 {
  font-size: 9pt;
  color: rgb(0, 153, 255);
}
.text302 {
  font-size: 9pt;
  color: rgb(47, 235, 147);
}
.textNo {
  font-size: 9pt;
  color: rgb(235, 122, 47);
}
</style>
